<template>
	<view class="popup">
		<view class="info">
			<image :src="data_info.img" class="cover"></image>
			<view class="info_view">
				<view class="price">
					<view class="unit">￥</view>
					<view class="value">{{data_info.price}}</view>
				</view>
				<view class="stock">库存 {{data_info.stock}}件</view>
			</view>
			<view class="close" @click="close">
				<image src="@/static/images/close.png"></image>
			</view>
		</view>
		<!-- <view class="popup_head">规格</view>
		<view class="list">
			<view class="item" v-for="item in 9">
				<image src="@/static/test/1.png"></image>
				<text>{{item}}瓶</text>
			</view>
		</view>
		<view class="popup_head">类型</view>
		<view class="type_list">
			<view class="item">标准</view>
		</view> -->
		<view class="number">
			<view>购买数量</view>
			<uv-number-box step="1" min="1" :max="data_info.stock" disabledInput integer v-model="value"
				@overlimit="overlimit"></uv-number-box>
		</view>
		<view class="submit">
			<view @click="submit(value)">确定</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	const props = defineProps({
		data_info: {
			type: Object,
			default: {
				img: "",
				stock: 0,
				price: 0.00
			}
		}
	});
	const data_info = props.data_info;
	const emit = defineEmits(["close", "submit"]);
	const value = ref(1);

	const overlimit = (type) => {
		if (type == "minus") {
			uni.$uv.toast("已经是最小值了");
		}
		if (type == "plus") {
			uni.$uv.toast("已经是最大值了");
		}
	};
	const close = () => emit('close');
	const submit = (value) => emit('submit', value);
</script>

<style scoped lang="scss">
	.popup {
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		padding: 30rpx;
		box-sizing: border-box;
		background: #FFFFFF;

		.info {
			border-bottom: 2rpx solid #EEEEEE;
			padding-bottom: 20rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;

			.cover {
				width: 200rpx;
				height: 200rpx;
			}

			.info_view {
				flex: 1;
				padding: 10rpx 0 16rpx 40rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.price {
					display: flex;
					align-items: flex-end;

					.unit {
						color: #CA1C1D;
						font-size: 32rpx;
						font-weight: bold;
					}

					.value {
						color: #CA1C1D;
						font-size: 50rpx;
						font-weight: bold;
					}
				}

				.stock {
					color: #999999;
					font-size: 24rpx;
				}
			}

			.close {
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.popup_head {
			color: #333333;
			font-size: 30rpx;
			font-weight: bold;
			padding: 20rpx 0 30rpx;
			box-sizing: border-box;
		}

		.list {
			display: flex;
			flex-wrap: wrap;
			// justify-content: space-between;

			.item {
				width: 88rpx;
				margin-right: 44rpx;
				margin-bottom: 26rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 90rpx;
					height: 90rpx;
				}

				text {
					color: #666666;
					font-size: 26rpx;
					padding-top: 15rpx;
					box-sizing: border-box;
				}
			}
		}

		.type_list {
			display: flex;

			.item {
				width: 308rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: 26rpx;
				border-radius: 10rpx;
				background: #CA1C1D;
			}
		}

		.number {
			margin: 65rpx 0 90rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.submit {
			width: 100%;
			padding: 0 35rpx;
			box-sizing: border-box;

			view {
				width: 100%;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: 36rpx;
				border-radius: 10rpx;
				background: #CA1C1D;
			}
		}
	}
</style>